/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-12-13 Time: 22:41
 *
 * 通用
 *
 * 图片与文字为主，用在列表项
 */

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image
} from 'react-native';
import PropTypes from 'prop-types';
import { FONT_COLOR_SUB_TITLE, FONT_COLOR_TITLE, FONT_SIZE_TITLE} from "../../constant/PHColors"
import AntDesign from "react-native-vector-icons/AntDesign"
import Entypo from "react-native-vector-icons/Entypo"
import FontAwesome from "react-native-vector-icons/FontAwesome"
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"
import FontAwesome5 from "react-native-vector-icons/FontAwesome5"

export default class IconsAndTextCellView extends Component {

  static propTypes = {
    title: PropTypes.string.isRequired,
    num: PropTypes.number
  }

  static defaultProps = {
    num: 0
  }

  render() {
    return (
      <View style={styles.body}>

        <View style={styles.imgBox}>
          {
            this.IconsText(this.props.title)
          }
        </View>

        <View style={styles.textBox}>
          <View style={styles.leftBox}>
            <Text style={styles.text}>
              {this.props.title}
            </Text>
          </View>
          {
            this.props.num > 0 &&
            <View style={styles.rightBox}>
              <Text style={styles.numText}>
                {this.props.num}
              </Text>
            </View>
          }
        </View>

        <View style={styles.arrowBox}>
          <AntDesign name={'right'} size={18} style={{color: FONT_COLOR_SUB_TITLE}}/>
        </View>
      </View>
    )
  }

  IconsText=(title)=>{
      switch (title) {
          case '账户设置': {
              return <AntDesign name={'user'} size={22} style={{color: '#f17f0f'}}/>
          }
          case '新消息提醒': {
              return <Entypo name={'bell'} size={22} style={{color: '#3893ff'}}/>
          }
          case '验证本机号码': {
              return <FontAwesome5 name={'mobile-alt'} size={22} style={{color: '#00af00',marginLeft:4}}/>
          }
          case '开启应用保护': {
              return <MaterialCommunityIcons name={'hospital'} size={22} style={{color: '#3893ff'}}/>
          }
          case '检查更新': {
              return <FontAwesome5 name={'lightbulb'} size={22} style={{color: '#f1a001',marginLeft:4}}/>
          }
          case '通讯录': {
              return <FontAwesome5 name={'user'} size={22} style={{color: '#f1a001'}}/>
          }
          case '员工班表': {
              return <FontAwesome5 name={'user-clock'} size={16} style={{color: '#0070ff'}}/>
          }
          case '人员状态': {
              return <FontAwesome5 name={'user-tag'} size={16} style={{color: '#c048dc'}}/>
          }
          case '分配做房': {
              return <FontAwesome name={'sitemap'} size={20} style={{color: '#03b91d'}}/>
          }
          case '换房报表': {
              return <FontAwesome name={'file-text-o'} size={20} style={{color: '#5d5d5d'}}/>
          }
          default: {
              return <AntDesign name={'bars'} size={22} style={{color: FONT_COLOR_SUB_TITLE}}/>
          }
      }
  }
}

const styles = StyleSheet.create({

  body: {
    height: 50,
    flexDirection: 'row',
    alignItems: 'center'
  },

  imgBox: {
    width: 20,
    height: 20,
    marginLeft: 15
  },

  img: {
    width: 20,
    height: 20
  },

  textBox: {
    flex: 1,
    flexDirection: 'row'
  },

  arrowBox: {
    marginRight: 15
  },

  leftBox: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start'
  },

  text: {
    fontSize: FONT_SIZE_TITLE,
    color: FONT_COLOR_TITLE,
    marginLeft: 15
  },

  rightBox: {
    width: 20,
    height: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
    marginRight: 10,
    borderRadius: 10
  },

  numText: {
    fontSize: 10,
    color: '#FFF'
  }
})
